<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 3 Example</title>
  <!-- 引入 Vue 3 的 CDN -->
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    <button @click="add">Add</button>
    <p>Counter: {{ counter }}</p>
  </div>

  <script>
    const { ref, onMounted } = Vue;

    const App = {
      setup() {
        // 使用 ref 定义一个响应式状态
        const counter = ref(0);

        // 定义一个 add 方法，用于增加计数器的值
        const add = () => {
          counter.value++;
        };

        // 在页面加载后调用 add 方法
        onMounted(() => {
          add();
        });

        // 返回状态和方法
        return {
          counter,
          add
        };
      }
    };

    // 创建 Vue 应用
    const app = Vue.createApp(App);

    // 挂载到页面上
    app.mount('#app');
  </script>
</body>
</html>
